<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link href="images/logo.jpg" rel="icon">
</head>
	<style>
		body,ul{
			margin: 0;
			padding: 0;
			}
		div{
			width:1160px;
			height: 128px;
			background-color: #ffffff;
			margin: 200px auto;
			overflow: hidden;
			padding: 20px;
		}
		ul{
			list-style-type:none;
			width:2000px;
		}
		ul li{
			width:187px;
			height: 125px;
			background-color: pink;
			/*border: 1px solid red;*/
			float: left;
			margin-right: 8px;
			border-radius: 15px;
			overflow: hidden;
			transition: all 0.4s;
		}
		ul:hover li{
			width: 107px;
		}
		ul li:hover{
			width:575px;
		}
		html,body{
			width: 100%;
			height:100%;
			background-color: #c7c7c7;
		}
	</style>
<body>
	<div>
		<ul>
			<li><img src="images/1.jpg"></li>
			<li><img src="images/2.jpg"></li>
			<li><img src="images/3.png"></li>
			<li><img src="images/4.jpg"></li>
			<li><img src="images/5.jpg"></li>
			<li><img src="images/6.jpg"></li>
		</ul>
	</div>
</body>
</html>
